/******************************************************************************************
 * Import
 ******************************************************************************************/
import _ from 'lodash';
import React, {Component} from 'react';
import { StyleSheet, Clipboard } from 'react-native';
import Design from '../../../design';
import Config from '../../../config';
import ScreenBase from '../../../library/base/screen';
import { Icon, Tabs, Toast } from 'antd-mobile-rn';
// import SplashScreen from 'react-native-splash-screen';
import {
    CAround, CBetween, CCenter, CColumn, CHand, CItemX, CItemY, CLine, CRow, CWrap, 
    CIcon, CImage, CSvg, CText,
    CContent, CFloat, CFooter, CHeader, CPage, CSide, 
    CEmpty, CError, CFail, CSkeleton, 
    CLabel, CButton
} from '../../../library/comp';
import {
    HttpText, HttpHesq
} from '../../../library/func';

// svg
import Licon from '../../../library/comp/project/icon';

/******************************************************************************************
 * Screen
 ******************************************************************************************/
export default class List extends ScreenBase {
    constructor(props) {
        super(props);
        this.state = {
            text:'',
            // 用户订单详情
			order:{
                enum_status:'已完成',
                count_product:5,
                set_amount:100,
                set_orderid:'zyx911007',
                set_take_name:'樊欣润',
                set_take_mobile:15130305503,
                time_submit:1543635471,
                set_take_address:'河北省保定市北市区瑞祥大街1001号和社区信息部',
                object:{
                    set_order_name:'人气水果人气水果人气水果人气水果人气水果人气水果人气水果人气水果人气',
                }
            },
			orderItem:[
                {
                    set_name:'【人气水果】泰国香水椰青1个装(单果750-1000g)',
                    set_price:88,
                    count:1,
                    is_comment:0,
                },
                {
                    set_name:'【人气水果】泰国香水椰青1个装(单果750-1000g)',
                    set_price:88,
                    count:1,
                    is_comment:0,
                },
                {
                    set_name:'【人气水果】泰国香水椰青1个装(单果750-1000g)',
                    set_price:88,
                    count:1,
                    is_comment:0,
                }
            ]
        }
    }

    /*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
    toToast(){
        // Toast.text('Toast')
    }
    //数据转化
    formatNumber(n) {
        n = n.toString();
        return n[1] ? n : '0' + n;
    }
    /**
     * 时间戳转化为年 月 日 时 分 秒
     * number: 传入时间戳
     * format：返回格式，支持自定义，但参数必须与formateArr里保持一致
    */
    formatTime(number, format) {

        var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
        var returnArr = [];
    
        var date = new Date(number * 1000);
        returnArr.push(date.getFullYear());
        returnArr.push(this.formatNumber(date.getMonth() + 1));
        returnArr.push(this.formatNumber(date.getDate()));
    
        returnArr.push(this.formatNumber(date.getHours()));
        returnArr.push(this.formatNumber(date.getMinutes()));
        returnArr.push(this.formatNumber(date.getSeconds()));
    
        for (var i in returnArr) {
        format = format.replace(formateArr[i], returnArr[i]);
        }
        return format;
    }
    // 复制功能
    async _getContent() {
        this.setState({
            text:await Clipboard.getString()
        })
        // let text = await Clipboard.getString()
        alert(this.state.text)
    }
    async _setContent() {
        Clipboard.setString(this.state.order.set_orderid);
        let text = await Clipboard.getString();
        this.state.order.set_orderid == text && Toast.info('复制成功')

    }
    // 总render
	render() {
        return (
            <CPage>
				<CContent mb='100' mt='90'>
					
					{/* 顶部订单状态 */}
					<CRow bg='#fff' x='center' py='40'>
						<CItemX y='center'>
							{/* 已发货显示 */}
							{this.state.order.enum_status == '已发货' && <CImage source={{uri:'http://image.mod.hesq.com.cn/rushbuy/assets/20181113/status_01.jpg'}} w='136' h='90'/>}

							{/* 交易成功显示 */}
							{this.state.order.enum_status == '已完成' && <CImage source={{uri:'http://image.mod.hesq.com.cn/rushbuy/assets/20181113/status_03.jpg'}} w='136' h='90'/>}

							{/* 未付款显示 */}
							{this.state.order.enum_status == '未付款' && <CImage source={{uri:'http://image.mod.hesq.com.cn/rushbuy/assets/20181113/status_02.jpg'}} w='120' h='90'/>}

							{/* 未发货显示 */}
							{this.state.order.enum_status == '未发货' && <CImage source={{uri:'http://image.mod.hesq.com.cn/rushbuy/assets/20181113/status_02.jpg'}} w='120' h='90'/>}

							{/* 已取消显示 */}
							{this.state.order.enum_status == "已取消" && <CImage source={{uri:'http://image.mod.hesq.com.cn/rushbuy/assets/20181113/status_02.jpg'}} w='120' h='90'/>}

                            <CItemY pl='20' x='left' py='3' h='90' style={{justifyContent:'space-between'}}>
								{/* 已完成显示 */}
								{this.state.order.enum_status == '已完成' && <CText size='26'>交易成功！</CText>}
                                
								{/* 已发货显示 */}
								{this.state.order.enum_status == '已发货' && <CText size='26'>卖家已发货！</CText>}

								{/* 未发货显示 */}
								{this.state.order.enum_status == '未发货' && <CText size='26'>已付款，等待卖家发货！</CText>}

								{/* 未付款显示 */}
								{this.state.order.enum_status == '未付款' && <CText size='26'>等待买家付款！</CText>}

								{/* 已取消显示 */}
								{this.state.order.enum_status == '已取消' && <CText size='26'>订单已取消！</CText>}

								<CHand>
									<CText size='24'>订单金额</CText>
									<CText size='24' color='#d03e3e'>￥{ this.state.order.set_amount }</CText>
									
								</CHand>
                            </CItemY>
                        </CItemX>
					</CRow>

                    {/* 收货地址信息 */}
					<CColumn bg='#fff' ma='20' ra='16' pa='20'>
						<CBetween style={{width:'100%'}}>
							<CHand>
                                {/* <CSvg icon={Icon.location} w='36' h='36'></CSvg> */}
                                <CIcon icon={ Licon["index-location"]} w='34' h='34' color='#6d6d6d'></CIcon>
								<CHand pl='16'><CText size='26'>{this.state.order.set_take_name}</CText></CHand>
							</CHand>
							<CHand>
								<CHand><CText size='26'>{this.state.order.set_take_mobile}</CText></CHand>
							</CHand>
						</CBetween>
						<CRow x='left' mt='16' ml="55">
							<CHand><CText size='22'>{this.state.order.set_take_address}</CText></CHand>
						</CRow>
					</CColumn>

                    {/* 商品信息 */}
					<CColumn bg='#fff' ma='20' ra='16'>

                        {/* 店铺名称 */}
                        <CLine px='20' py='30'>
                            <CIcon icon={ Licon["shop-stroew"] } color='#6d6d6d' w='26' h='28'></CIcon>
                            <CText size='24' pl='16'>每日一达</CText>
                        </CLine>

                        {/* 商品信息 */}
                        {this.state.orderItem.map(item=>{
                            return (
                                <CBetween bg='#f9f9f9' pa='16' y='center' bb='2 #f6f6f6'>
                                    <CImage
                                        style={{width: 65, height: 65}}
                                        source={{uri:'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542164973540zpkr.jpg'}}
                                    />
                                    <CColumn pl='20'>
                                        <CBetween style={{width:'100%'}} y='top' >
                                            <CText size='25' color='#252525' f='1'>{item.set_name}</CText>
                                            <CText size='28' pl='10' pr='10' df  color='#252525'>￥{item.set_price}</CText>
                                        </CBetween>
                                        <CBetween pt='10' style={{width:'100%'}}>
                                            <CText size='25' color='#aaa'>x{item.count}</CText>
                                            <CHand>
                                                {item.is_comment == 0 && this.state.order.enum_status=='已完成'  && <CButton ba='2 #d7d7d7' pl='23' pr='23' ra='100' py='4'><CText color='#5e5e5e' size='24'>评价</CText></CButton>}
                                            </CHand>
                                        </CBetween>
                                    </CColumn>
                                </CBetween>
                            )
                        })}

                        {/* 订单信息底部部分 */}
                        <CBetween bg='#fff' pa='25' y='center' bb='2 solid #f2f2f2' style={{width:'100%'}}>
                            <CText size='24'>配送方式</CText>
                            <CText size='24' color='#d65453'>包邮</CText>
                        </CBetween>
                        <CLine bg='#fff' pa='25' x='right' bb='2 solid #f2f2f2' style={{width:'100%'}}>
                            <CText size='25'>共计1件商品,实付：</CText>
                            <CHand><CText size='28' color='#cc2d2e' bold>￥{this.state.order.set_amount}</CText></CHand>
                        </CLine>
                        <CBetween pa='25' style={{width:'100%'}}>
                            <CItemY x='left'>
                                <CHand><CText size='22' color='#b9b9b9'>每日一达订单号: {this.state.order.set_orderid}</CText></CHand>
                                <CText color='#b9b9b9' size='22'>成交时间: {this.formatTime(this.state.order.time_submit, 'Y-M-D h:m:s')}</CText>
                            </CItemY>
                            <CButton ba='2 #cc2d2e' pl='20' pr='20' ra='100' py='4' onPress={_=>this._setContent(this)}><CText color='#cc2d2e' size='24'>复制单号</CText></CButton>
                            {/* <CHand pl='8'>
                                <CBetween ba='2 solid #cc2d2e' x='center' ra='100' color='#cc2d2e' px='16' py='6'><CText size='24'>复制单号</CText></CBetween>
                            </CHand> */}
                        </CBetween>

                    </CColumn>


                </CContent>

                {/* 顶部 star */}
                <CHeader h='90' y='center' bg='#fff' style={{ borderBottomColor:"#eee", borderBottomWidth:1 }}>
                    <CBetween h='90' px='10' bg='#fff' style={{width:'100%'}}>
                        <CHand>
                            <CIcon color="#434343" w='38' h='38' icon={ Licon.gobcak }></CIcon>
                        </CHand>
                        <CText size='30' color='#000'>订单详情</CText>
                        <CText></CText>
                    </CBetween>
                </CHeader>
                {/* 顶部 star */}
                
				{/* Footer */}
				<CFooter h='100' bg='#fff' y='center'>

					<CBetween px='20'>
					
						<CRow x='right'>

							{/* 已完成显示 */}
							{this.state.order.enum_status == '已完成' && 
								<CButton ba='2 #cb2829' bg='#cb2829' ml='20' ra='100' py='6' px='20' onPress={this.toToast}><CText size='24' color='#fff'>返回列表</CText></CButton>
							}

							{/* 已发货显示 */}
							{this.state.order.enum_status == '已发货' && 
								<CButton ba='2 #cb2829' bg='#cb2829' ml='20' ra='100' py='6' px='20' onPress={this.toToast}><CText size='24' color='#fff'>确认收货</CText></CButton>	
							}

							{/* 未付款显示 */}
							{this.state.order.enum_status == '未付款' && 
								<CHand>
									<CButton ba='2 #cb2829' ra='100' py='6' px='20' onPress={this.toToast}><CText size='24' color='#cb2829'>取消订单</CText></CButton>
									<CButton ba='2 #cb2829' bg='#cb2829' ml='20' ra='100' py='6' px='50' onPress={this.toToast}><CText size='24' color='#fff'>付款</CText></CButton>
								</CHand>
							}

							{/* 未发货显示 */}
							{this.state.order.enum_status == '未发货' && 
								<CHand>
									<CButton ba='2 #cb2829' bg='#cb2829' ra='100' py='6' px='20' onPress={this.toToast}><CText size='24' color='#fff'>返回列表</CText></CButton>
								</CHand>
							}

							{/* 已取消显示 */}
							{this.state.order.enum_status == '已取消' && 
								<CHand>
									<CButton ba='2 #cb2829' bg='#cb2829' ra='100' py='6' px='20' onPress={this.toToast}><CText size='24' color='#fff'>返回列表</CText></CButton>
								</CHand>
							}
							
						</CRow>
					</CBetween>
					
				</CFooter>
			</CPage>
        )
    }
}